<div class="modal-header">
    <!--<a class="close" ng-click="close()">×</a>-->
    <div class="input-prepend input-append">
        <button type="button" class="btn {{ step01_style }}" ng-click="jump(1)">I.数据中心</button>
        <button type="button" class="btn {{ step02_style }}" ng-click="jump(2)">II.添加集群</button>
        <!--<button type="button" class="btn {{ step03_style }}" ng-click="jump(3)">III.激活主机</button>
        <button type="button" class="btn {{ step04_style }}" ng-click="jump(4)">IV.添加存储</button>
        <button type="button" class="btn {{ step05_style }}" ng-click="jump(5)">V.添加网络</button>-->
    </div>
</div>
<div class="modal-body">
    <form class="form-horizontal" name="guide_form">
        <!------step01-------------->
        <div ng-show="current_step==1">
            <div class="well"><label><i class="icon-info-sign"/>tcloud需要您初始化一个默认的数据中心，这是一次性操作。</label></div>
            <div class="control-group">
                <label class="control-label">名称：</label>

                <div class="controls">
                    <input type="text" required ng-model="datacenter_name" class="input"/>
                </div>
            </div>
        </div>

        <!------step02-------------->

        <div ng-show="current_step==2">
            <div class="well">
                <label><i class="icon-info-sign"/>您可以为数据中心建立集群，集群是多个服务器的集合，同时是存储，网络的划分区域</label>
            </div>
            <div class="control-group">
                <label class="control-label">名称：</label>

                <div class="controls">
                    <input type="text" required ng-model="cluster_name" class="input"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">描述：</label>

                <div class="controls">
                    <textarea type="text" required ng-model="cluster_desc" class="input"></textarea>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">CPU系列：</label>

                <div class="controls">
                    <select ng-model="cluster_cpu">
                        <option value="intel">INTEL</option>
                        <option value="amd">AMD</option>
                    </select>
                </div>
            </div>
        </div>


        <!------step03-------------->
        <div ng-show="current_step==3">
            <div class="well"><label><i class="icon-info-sign"/>请选择要激活的主机,您也可以选择稍后在数据中心页面激活</label> </div>
            <table class="table table-bordered table-condensed">
                <thead>
                <tr>
                    <th><input type="checkbox"/></th>
                    <th>IP</th>
                    <th>主机名</th>
                    <th>CPU</th>
                    <th>内存</th>
                    <th>架构</th>
                    <th></th>

                </tr>
                </thead>
                <tbody>
                <tr ng-click="show_details()" selectable="host" ng-repeat="host in hosts">
                    <td><input type="checkbox" value="{{ host.id }}" ng-model="host_selected[host.id]"/></td>
                    <td>{{ host.ip }}</td>
                    <td>{{ host.host_name }}</td>
                    <td>{{ host.cpu }}</td>
                    <td>{{ host.mem *1024 * 1024| bytes}}</td>
                    <td>{{ host.arch }}</td>
                    <td><button class="btn btn-primary btn-mini">激活</button></td>
                </tr>
                </tbody>
            </table>
        </div>


        <!------step04-------------->
        <div ng-show="current_step==4">
            <div class="well"><label><i class="icon-info-sign"/>添加数据或者ISO存储,您也可以选择稍后添加</label></div>

            <div class="control-group">
                <label>
                    <div class="btn btn-mini" ng-click="add_storage()">添加</div>
                </label>
            </div>
            <table class="table table-bordered table-condensed">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>服务器</th>
                    <th>大小</th>
                    <th>关联集群</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>系统盘</td>
                    <td>ISO</td>
                    <td>172.16.7.1</td>
                    <td>320GB</td>
                    <td>no1</td>
                </tr>
                <tr ng-click="show_details()" selectable="host" ng-repeat="host in hosts">
                    <td><input type="checkbox" value="{{ host.id }}" ng-model="selected[host.id]"/></td>
                    <td>{{ host.host_name }}</td>
                    <td>
                        <div class="progress active">
                            <div class="bar" style="width: {{ host.cpu_usage }}%;">{{ host.cpu_usage }}%</div>
                        </div>
                    </td>
                    <td>
                        <div class="progress progress-success active">
                            <div class="bar" style="width: {{ host.memory_usage }}%;">{{ host.memory_usage }}%</div>
                        </div>
                    </td>
                    <td>{{ host.cpu }}</td>
                    <td>{{ host.mem *1024 * 1024| bytes}}</td>
                    <td>{{ host.arch }}</td>
                    <td>{{ host.vms.length }}</td>
                    <td>{{ host.status }}</td>
                </tr>
                </tbody>
            </table>
        </div>


        <!------step05-------------->

        <div ng-show="current_step==5">
            <div class="well"><label><i class="icon-info-sign"/>为集群添加网络,您也可以选择稍后添加</label></div>

            <div class="control-group">
                <label>
                    <div class="btn btn-mini" ng-click="add_network()">添加</div>
                </label>
            </div>
            <table class="table table-bordered table-condensed">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>IP段</th>
                    <th>DHCP起始</th>
                    <th>DHCP结束</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>测试</td>
                    <td>NAT</td>
                    <td>172.16.10.0/24</td>
                    <td>172.16.10.100</td>
                    <td>172.16.10.150</td>
                </tr>
                <tr ng-click="show_details()" selectable="host" ng-repeat="host in hosts">
                    <td><input type="checkbox" value="{{ host.id }}" ng-model="selected[host.id]"/></td>
                    <td>{{ host.host_name }}</td>
                    <td>
                        <div class="progress active">
                            <div class="bar" style="width: {{ host.cpu_usage }}%;">{{ host.cpu_usage }}%</div>
                        </div>
                    </td>
                    <td>
                        <div class="progress progress-success active">
                            <div class="bar" style="width: {{ host.memory_usage }}%;">{{ host.memory_usage }}%</div>
                        </div>
                    </td>
                    <td>{{ host.cpu }}</td>
                    <td>{{ host.mem *1024 * 1024| bytes}}</td>
                    <td>{{ host.arch }}</td>
                    <td>{{ host.vms.length }}</td>
                    <td>{{ host.status }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button ng-click="prev_step()" ng-hide="current_step == min_step" class="btn pull-left btn-primary">上一步</button>
    <span style="padding-right: 230px;color: red;" ng-show="error">{{ error }}</span>
    <img width="32" height="32" ng-show="loading" src="/static/images/loading-indicator.gif" title="创建中...">
    <button ng-click="next_step()" ng-disabled="check_inputs()" ng-hide="current_step == 2||loading" class="btn pull-right btn-primary">下一步</button>
    <button ng-click="backtoindex()" ng-hide="current_step < 2" class="btn pull-right btn-primary">完成</button>
</div>